<template>
  <div class="classify">
    <b-container>
      <div style="background-color: #ececec; padding: 20px" class="mt-4">
        <a-row :gutter="16">
          <a-col :span="8" class="mt-2" v-for="item in classifydata" :key="item.cid">
            <a-card hoverable size="small">
              <img
                slot="cover"
                alt="example"
                :src="item.imgUrl"
              />
              <a-card-meta :title="item.title">
                <template slot="description"> {{item.body}} </template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </b-container>
  </div>
</template>

<script>
export default {
  name: "classify",
  data() {
    return {
      classifydata:null //存了分类数据
    };
  },
  methods: {
   async Classif(){
     let res= await this.$article.classify()
      // console.log(res);
      this.classifydata=res.data.data
      console.log(this.classifydata);
    }
  },
  created(){
  this.Classif()
  }
};
</script>

<style lang="scss">
.classify {
 .ant-card-small{
   max-height: 300px;
   overflow: hidden;
   .ant-card-meta-description{
       min-height: 85px;
       display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
   }
   img{
     height: 150px;
   }
 }
}
</style>
